<script lang="ts" setup>
import CommonMusicTable from '../Common/CommonMusicTable.vue';
import CommonSlide from '@components/Common/CommonSlide.vue';
import { useStore } from '@store/index';
import { onBeforeMount, ref, inject, onUpdated } from 'vue';
import { checkFollow, getPublicUserInfo, getSinger50Music, getSingerPageInfo, follow, getRecommendSinger, getMusicCD } from '@api';
import { MusicList, User, SingerPageInfo, popMessageKey, popMessage, Music, PageInfo } from '@/type';
import SingerCd from '../Singer/SingerCD.vue'
import router from '../../router';
const props = defineProps(['id'])
const store = useStore()
const nowSinger = ref("-1");
const isFollow = ref(false)
const musicList = ref<MusicList[]>([])
const CDList = ref<MusicList[]>([])
const singerInfo = ref<User>()
const singerPageInfo = ref<SingerPageInfo>()
const slidePageInfo = ref<PageInfo<User>>()
const popMessage = inject(popMessageKey) as popMessage
onBeforeMount(() => {
    getSinger50Music(props.id).then((res) => {
        if (res.data.code == 1) {
            console.log(res.data.data);
            musicList.value = res.data.data
        }
    })
    getPublicUserInfo(props.id).then(res => {
        if (res.data.code == 1) {
            singerInfo.value = res.data.data
        }
    })
    getSingerPageInfo(props.id).then(res => {
        if (res.data.code == 1) {
            singerPageInfo.value = res.data.data
        }
    })
    checkFollow(props.id).then(res => {
        if (res.data.code == 1) {
            isFollow.value = res.data.data
        }
    })
    getMusicCD(props.id).then(res => {
        if (res.data.code == 1) {
            CDList.value = res.data.data
        } else {
            CDList.value = []
        }
    })
    otherSingerInfo()
    nowSinger.value = props.id

})
onUpdated(() => {
    if (props.id != nowSinger.value) {
        getSinger50Music(props.id).then((res) => {
            if (res.data.code == 1) {
                console.log(res.data.data);
                musicList.value = res.data.data
            }
        })
        getPublicUserInfo(props.id).then(res => {
            if (res.data.code == 1) {
                singerInfo.value = res.data.data
            }
        })
        getSingerPageInfo(props.id).then(res => {
            if (res.data.code == 1) {
                singerPageInfo.value = res.data.data
            }
        })
        checkFollow(props.id).then(res => {
            if (res.data.code == 1) {
                isFollow.value = res.data.data
            }
        })
        getMusicCD(props.id).then(res => {
            if (res.data.code == 1) {
                CDList.value = res.data.data
            } else {
                CDList.value = []
            }
        })
        otherSingerInfo()
        nowSinger.value = props.id
    }
})
const activeIndex = ref(0)
const to = (index: number) => {
    activeIndex.value = index
}
const toUserPage = () => {
    router.push({
        name: 'personCenter',
        params: {
            userId: props.id,
            type: 'default'
        }
    })
}
const followSinger = () => {
    if (store.isLogin != 1) {
        popMessage("未登陆", 'error')
        return
    }
    follow(singerInfo.value?.id as string).then((res) => {
        if (res.data.code == 1) {
            popMessage('关注成功', 'success');
            isFollow.value = true
        }
    })
}
const otherSingerInfo = () => {
    getRecommendSinger().then(res => {
        if (res.data.code == 1) {
            slidePageInfo.value = res.data.data
        }
    })
}
</script>
<template>
    <div class="singer-container">
        <div class="singer">
            <div class="singer-header">
                <h2 class="user-name">{{ singerInfo?.name }}</h2>
                <img class="long-image"
                    :src="`http://www.mmdccj.top:9003/static/image/${singerPageInfo ? singerPageInfo?.image : 'undefined.jpg'}`"
                    alt="">
                <div class="btns">
                    <a @click="toUserPage" class="user-page">个人主页</a>
                    <a v-if="!isFollow" @click="followSinger" class="like">关注</a>
                    <a v-else class="like">已关注</a>
                </div>
            </div>
            <ul class="func">
                <li @click="to(0)" :class="{ activeItem: activeIndex == 0, unactiveItem: activeIndex != 0 }"><a
                        class="item">热门作品</a>
                </li>
                <li @click="to(1)" :class="{ activeItem: activeIndex == 1, unactiveItem: activeIndex != 1 }"><a
                        class="item">所有专辑</a>
                </li>
                <li @click="to(2)" :class="{ activeItem: activeIndex == 2, unactiveItem: activeIndex != 2 }"><a
                        class="item">艺人介绍</a>
                </li>
            </ul>
            <div class="contain" v-show="activeIndex == 0">
                <CommonMusicTable type-id="-1" :page-size="20" model="singer" :singer="[singerInfo as User]"
                    :my-music="false" :music-list="(musicList as Music[])" />
            </div>
            <div class="contain" v-show="activeIndex == 1">
                <SingerCd :CD="(CDList as MusicList[])" />
            </div>
            <div class="contain" v-show="activeIndex == 2">
                {{ singerInfo?.introduce }}
            </div>
        </div>
        <div class="slide">
            <CommonSlide :music-lisl-model="false" :single-music-model="false" :singer-model="true" :bottom="[]"
                :top="slidePageInfo?.list" />
        </div>
    </div>
</template>
<style lang="css" scoped>
.long-image {
    height: 300px;
    width: 640px;
}

.user-page:hover,
.like:hover {
    background: rgba(0, 0, 0, 0.3);
}

.user-page,
.like {
    color: white;
    background: rgba(0, 0, 0, 0.15);
    height: 30px;
    display: inline-block;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.like {
    width: 60px;
}

.user-page {
    margin-right: 15px;
    width: 90px;
}

.singer-header {
    position: relative;
}

.btns {
    position: absolute;
    left: 455px;
    top: 290px;
}

.activeItem,
.unactiveItem {
    cursor: pointer;
}

.unactiveItem {
    border-top: 2px solid white;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
}

.contain {
    width: var(--singer-lagre-image-width);
    margin-bottom: 100px;
}

.func .item {
    height: 40px;
    line-height: 40px;
    cursor: pointer;
}

.func li {
    list-style: none;
    flex: 1;
    display: flex;
    justify-content: center;
}

.activeItem {
    border-top: 2px solid var(--red-style);
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.func {
    display: flex;
    margin: 0 0 20px 0;
    width: var(--singer-lagre-image-width);
    padding-left: 0;

}

.user-name {
    margin: 0 0 5px 0;
    font-weight: 400;
    height: 34px;
}

.singer-container {
    display: flex;
}

.singer {
    flex: 9;
    padding-top: 20px;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.slide {
    flex: 3;
}
</style>